<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/aboutUs.css">
    <style>
        .head{
            background: linear-gradient(to bottom,#646566, rgba(255, 255, 255, 0));
        }
    </style>
</head>
<body>
<div class="head">
    <div class="logo">
        <a href="index.html"><img src="imgs/index/ESDC_logo.jpg" alt=""></a>
        <div class="logo_name">
            <h1>&nbsp;工&nbsp;程&nbsp;软&nbsp;件&nbsp;研&nbsp;发&nbsp;中&nbsp;心</h1>
            <p>&nbsp;Engineering Software Development Centre</p>
        </div>
    </div>
    <div class="top_list">
        <ul>
            <li><a href="visitor.html">访客</a></li>
<!--            <li><a href="">邮箱</a></li>-->
            <li class="dropdown"><a href="">联系我们</a>
                <div class="dropdown-content">
                    <p>电话：123-456-7890</p>
                    <p>邮箱：contact@example.com</p>
                    <p>地址：北京市朝阳区</p>
                </div>
            </li>
            <li id="userProfileBtn" style="display: none;">
                <a href="javascript:void(0);" onclick="showPersonalBox()">用户名</a>
            </li>
            <li id="loginRegisterBtn">
                <a href="javascript:void(0);" onclick="showLoginBox()">登录</a><span>/</span><a href="javascript:void(0);" onclick="showRegistrationBox()">注册</a>
            </li>
        </ul>
    </div>
    <div class="bottom_nav">
        <ul>
            <li><a href="aboutUs.html">关于我们</a></li>
            <li><a href="researchFindings.html">研究成果</a></li>
            <li><a href="newsEvents.html">新闻活动</a></li>
            <li><a href="cooperation.html">合作交流</a></li>
        </ul>
    </div>
    <div class="test"></div>
</div>
<div class="myCanvas" id="myCanvas">
    <canvas></canvas>
</div>
<div class="number-list">
    <div class="title">
        <img src="imgs/aboutUs/title.png" alt="">
        <span>Wolves travel thousands of miles to eat meat</span>
    </div>
    <div class="introduction">
        <h1>-&nbsp;&nbsp;实验室简介&nbsp;&nbsp;-</h1>
        <div class="content">
            <h3>概览</h3>
            <p>工程软件研发中心是江西师范大学软件学院下设的专业软件开发实验室，自2023年12月开始建设，并于2024年6月正式投入使用。本实验室致力于成为省内一流的专业应用软件开发团队，专注于物联网系统和Web2.0系统的开发、部署及运维工作。</p>
            <h3>团队领导</h3>
            <p>实验室由杜英魁博士领导，他是一位教授并担任江西省区块链数据安全与治理工程研究中心主任、南昌市防盲技术与装备研发重点实验室主任等重要职务。杜博士在学术界和工业界都有着丰富的经验，曾主持和参与多项国家级科研项目和企业委托开发项目。</p>
            <h3>团队构成</h3>
            <p>实验室目前拥有固定研发人员19名，校外合作导师2名（均为具有15年以上行业经验的研发总监），以及本科在校学生18名。团队成员经过严格的系统培训和编程实战考核，其中8名大二学生已具备系统级软件开发能力，并分为两个开发小组进行实际Web项目开发。其余10名学生为大一新生，正在接受JavaWeb相关技术的培训和考核。</p>
<!--            <h3>研发项目</h3>-->
<!--            <p>工程软件研发中心的团队成员参与了多个创新项目，包括但不限于：</p>-->
<!--            <h4>1.双目视觉里程计系统：</h4>-->
<!--            <p>采用NASA方法与我们的方法对比，显著提高了轨迹长度和降低了定位误差。</p>-->
<!--            <h4>2.基于单目视觉的被动合作目标位姿测量系统：</h4>-->
<!--            <p>实现了实时多线程并行传输和被动合作目标实时识别算法。</p>-->
<!--            <h4>3.基于立体视觉的场景三维重建系统：</h4>-->
<!--            <p>无需畸变校正，处理速度快。</p>-->
<!--            <h4>4.面向无人机视觉系统的大场景图像拼接系统：</h4>-->
<!--            <p>技术创新点在于最佳拼接缝的选择。</p>-->
<!--            <h4>5.面向无人机的目标识别与跟踪应用系统：</h4>-->
<!--            <p>包括跟踪模板自适应变形算法和模板漂移主动修正算法。</p>-->
<!--            <h4>6.基于视觉的工业产品分类系统：</h4>-->
<!--            <p>包括邮单校正系统和汽车轮毂自动分类系统。</p>-->
<!--            <h4>7.基于视频序列的生产作业管理系统：</h4>-->
<!--            <p>集成了24小时监控视频显示、视频剪切合成等功能模块。</p>-->
<!--            <h4>8.多显示模式型号的WIFI通信室内型空气质量监测无线传感器终端：</h4>-->
<!--            <p>适用于多种室内场所环境空气质量在线监测。</p>-->
<!--            <h4>9.彩色OLED显示的4G通信室内型空气质量监测无线传感器终端：</h4>-->
<!--            <p>用于便携性部署和移动应用领域。</p>-->
<!--            <h4>10.便携式室内型空气质量监测无线传感器终端：</h4>-->
<!--            <p>面向新装修家庭用户和建材安全领域。</p>-->
<!--            <h4>11.无人值守小型室外环境空气质量和大气要素综合监测站：</h4>-->
<!--            <p>具备多种大气污染物和气象要素的在线监测能力。</p>-->
<!--            <h4>12.环境监测数据可视化分析系统平台：</h4>-->
<!--            <p>提供数据可视化分析。</p>-->
<!--            <h4>13.大件物流、冷链等商用车车厢环控系统：</h4>-->
<!--            <p>监控和调节车厢环境。</p>-->
<!--            <h4>14.眼压在线监测系统：</h4>-->
<!--            <p>实时监测眼压。</p>-->
<!--            <h4>15.地铁智能水位监测和预警系统：</h4>-->
<!--            <p>保障地铁安全运行。</p>-->
        </div>
        <h1>-&nbsp;&nbsp;指导老师&nbsp;&nbsp;-</h1>
        <div class="content instructor-profile">
            <!-- 指导老师的简介将在这里动态生成 -->
        </div>
        <h1>-&nbsp;&nbsp;成员简介&nbsp;&nbsp;-</h1>
        <div class="content member-profiles">
            <!-- 成员简介将在这里动态生成 -->
        </div>
    </div>
    <div class="footer">
        <div class="footer_image">
            <img src="imgs/footer/ESDC_logo.jpg" alt="">
        </div>
        <div class="words">
            <p>版权:江西师范大学(Jiangxi Normal University)ICP备案编号：赣B2-20050166号-1</p>
            <p>学校地址：［瑶湖校区］江西省南昌市紫阳大道99号邮政编码：330022</p>
            <p>［青山湖校区］江西省南昌市北京西路437号邮政编码：330027</p>
        </div>
        <div class="QRcode">
            <img src="imgs/footer/QRcode1.png">
            <img src="imgs/footer/QRcode2.png">
        </div>
    </div>
</div>
<!-- 弹窗 -->
<div id="loginBox" class="login-box" style="display: none; position: fixed; z-index: 1000; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: transparent; padding: 0; width: 1200px; height: 850px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
    <iframe id="loginFrame" src="" frameborder="0" style="width: 100%; height: 100%; border: none;"></iframe>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/window.js"></script>
<script>
    window.onload = function() {
        axios({
            method: "get",
            url: "http://localhost:8080/javaweb_project/member/selectAllMembers",
        }).then(function (resp) {
            let members = resp.data;
            let instructorContainer = document.querySelector('.instructor-profile');
            let memberContainer = document.querySelector('.member-profiles');

            // 假设后端返回的数据中的第一个成员是指导老师
            let instructor = members[0];
            let instructorProfile = `
                    <div class="personal_profile">
                        <img src="imgs/aboutUs/${instructor.memberId}.jpg" alt="${instructor.memberName}">
                        <p>姓名：<span>${instructor.memberName}</span></p>
                        <p>性别：<span>${instructor.gender}</span></p>
                        <p>职务：<span>${instructor.position}</span></p>
                        <p>出生日期：<span>${instructor.birthdayDate}</span></p>
                        <p>简介：<span>${instructor.bios}</span></p>
                        <p>荣誉：<span>${instructor.honors}</span></p>
                    </div>
                `;
            instructorContainer.innerHTML = instructorProfile;

            // 将成员数据填充到页面中
            members.slice(1).forEach((member, index) => { // 从第二个成员开始遍历
                let profileDiv = document.createElement('div');
                profileDiv.className = index % 2 === 0 ? 'left_personal_profile' : 'right_personal_profile';
                profileDiv.innerHTML = `
                        <img src="imgs/aboutUs/${member.memberId}.jpg" alt="${member.memberName}">
                        <p>姓名：<span>${member.memberName}</span></p>
                        <p>性别：<span>${member.gender}</span></p>
                        <p>职务：<span>${member.position}</span></p>
                        <p>出生日期：<span>${member.birthdayDate}</span></p>
                        <p>简介：<span>${member.bios}</span></p>
                        <p>荣誉：<span>${member.honors}</span></p>
                        <p>座右铭：<span>${member.motto}</span></p>
                    `;
                memberContainer.appendChild(profileDiv);
            });
        }).catch(function (error) {
            console.error('Error fetching members:', error);
        });
    };
</script>
<script>
    (function(){

        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;

        var canvas = document.querySelector("canvas");
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight;

        var ctx = canvas.getContext("2d");

        ctx.globalCompositeOperation = "saturation"; //合成方法

        //stats.js
//   var stats = new Stats();
// document.body.appendChild( stats.domElement );

        var particles = [];

        var pIndex = 0;
        var frameId;


        /*             */
        /*Particle */
        /*            */

        function Particle(color,x,y,circleSize,radius){
            this.color = color;
            this.x = 0;
            this.y = 0;
            this.posX = x;
            this.posY = y;

            this.circleSize = circleSize;

            this.direction = getRandom(-1,1);

            this.wave;
            this.amplitude = getRandom(-50,50);
            this.waveSpeed = getRandom(2,3);
            this.speed = getRandom(1,2);

            particles[pIndex] = this;
            this.id = pIndex;
            pIndex++;

            this.radius = radius;
            this.count = 0;
        };

        Particle.prototype.draw = function(){
            this.radius += Math.sin(this.count*0.1);

            this.wave = Math.sin( Math.PI/180*this.count*this.waveSpeed * this.direction ) * this.amplitude;

            this.x = Math.sin( Math.PI/180*this.count * this.speed * this.direction ) * this.circleSize - this.radius/2 + this.wave + this.posX;
            this.y = Math.cos( Math.PI/180*this.count * this.speed * this.direction) * this.circleSize - this.radius/2 + this.wave + this.posY;

            this.count += 1;

            var colA = hex2rgba(this.color,1);
            var colB = hex2rgba(this.color,0);

            var grd = ctx.createRadialGradient( this.x+this.radius/2,  this.y+this.radius/2,  0,  this.x+this.radius/2,  this.y+this.radius/2, this.radius/2);
            grd.addColorStop(0, colA);
            grd.addColorStop(1,  colB);

            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.fillRect( this.x, this.y, this.radius, this.radius );
            ctx.closePath();
            ctx.fill();

        }



        var colorTips = [
            '#151313',
            '#0b0a0a',
            '#929392',
            '#e5ebec',
            '#171516'
        ]

        //function Particle(color,x,y,circleSize,radius){
        for(var i = 0; i < 30; i++){
            var r = Math.floor( getRandom(0,colorTips.length) );
            new Particle( colorTips[r], getRandom(0,canvas.width/2), getRandom(0,canvas.height), getRandom(-canvas.width,canvas.width),getRandom(500,1000));
        }



        //function Particle(circleSize,radius,x,y,direction,speed,amplitude,waveSpeed){

        function loop(){
            ctx.clearRect(0,0, canvas.width, canvas.height);  //画面更新

            //Particle描画
            for(var i in particles){
                particles[i].draw();
            }

            frameId = requestAnimationFrame(loop);
            if(frameId % 2 == 0) { return; }//60fps
            stats.update();
        }

        loop();


        window.addEventListener("resize", function(){
            // canvas.width = window.innerWidth;
            // canvas.height = window.innerHeight;
            // x = canvas.width / 2;
            // y = canvas.height / 2;
        });


        function getRandom(min, max) {
            return Math.random() * (max - min) + min;
        }


        function hex2rgba (hex, alpha = 1) {


            let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
            let c = null
            if (r) {
                c = r.slice(1,4).map(function(x) { return parseInt(x, 16) })
            }

            r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
            if (r) {
                c = r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16) })
            }

            if (!c) {
                return null
            }
            return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${alpha})`
        }


    })();
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        checkLoginStatus(); // 检查登录状态并更新界面
    });

    function checkLoginStatus() {
        const username = localStorage.getItem('username');
        if (username) {
            updateUserInfo(username);
        } else {
            // 如果没有用户名，则显示登录注册按钮
            const loginRegisterBtn = document.getElementById('loginRegisterBtn');
            const userProfileBtn = document.getElementById('userProfileBtn');
            loginRegisterBtn.style.display = 'inline';
            userProfileBtn.style.display = 'none';
        }
    }

    function updateUserInfo(username) {
        const userProfileBtn = document.getElementById('userProfileBtn');
        const loginRegisterBtn = document.getElementById('loginRegisterBtn');

        if (userProfileBtn && loginRegisterBtn) {
            userProfileBtn.querySelector('a').innerText = username;
            userProfileBtn.style.display = 'inline'; // 显示用户名按钮,inline保证不被换行
            loginRegisterBtn.style.display = 'none'; // 隐藏登录注册按钮
        } else {
            console.error('User profile or login register button not found');
        }
    }
</script>
</body>
</html>